<template>
  <div class="iViewFirstDya">
    <Row class="iviewStyle">
      <Col span="24">iView学习</Col>
    </Row>
    <!-- Button -->
    <Row :gutter="8" style="display: flex;">
      <Col style="font-size: 22px;font-weight: 900;">Button:</Col>
      <Col span>
        <Button>Default</Button>
      </Col>
      <Col span>
        <Button type="primary">Primary</Button>
      </Col>
      <Col span>
        <Button type="dashed">Dashed</Button>
      </Col>
      <Col span>
        <Button type="text">Text</Button>
      </Col>
      <Col span>
        <Button type="info">Info</Button>
      </Col>
      <Col span>
        <Button type="success">Success</Button>
      </Col>
      <Col span>
        <Button type="warning">Warning</Button>
      </Col>
      <Col span>
        <Button type="error">Error</Button>
      </Col>
    </Row>
    <!-- 卡片 -->
    <Card class="CardView">
      <p slot="title">
        <Icon type="ios-film-outline"></Icon>Classic film
      </p>
      <a href="#" slot="extra" @click.prevent="changeLimit">
        <Icon type="ios-loop-strong"></Icon>Change
      </a>
      <ul>
        <li class="cardLiView" v-for="item in randomMovieList">
          <a :href="item.url" target="_blank">{{ item.name }}</a>
          <span>
            <Icon type="ios-star" v-for="n in parseInt(item.rate/2)" :key="n"></Icon>
            <Icon type="ios-star" v-if="(item.rate%1) == 0"></Icon>
            <Icon type="ios-star-half" v-else></Icon>
            {{ item.rate }}
          </span>
        </li>
      </ul>
    </Card>
  </div>
</template>


<script>
import common from "../../common/common.js";

export default {
  name: "iViewFirstDya",
  props: {
    item: {
      title: String,
      closed: Boolean
    }
  },
  data() {
    return {
      movieList: [
        {
          name: "The Shawshank Redemption",
          url: "https://movie.douban.com/subject/1292052/",
          rate: 5.6
        },
        {
          name: "Leon:The Professional",
          url: "https://movie.douban.com/subject/1295644/",
          rate: 9.4
        },
        {
          name: "Farewell to My Concubine",
          url: "https://movie.douban.com/subject/1291546/",
          rate: 9.5
        },
        {
          name: "Forrest Gump",
          url: "https://movie.douban.com/subject/1292720/",
          rate: 6.0
        },
        {
          name: "Life Is Beautiful",
          url: "https://movie.douban.com/subject/1292063/",
          rate: 9.0
        },
        {
          name: "Spirited Away",
          url: "https://movie.douban.com/subject/1291561/",
          rate: 2.2
        },
        {
          name: "Schindlers List",
          url: "https://movie.douban.com/subject/1295124/",
          rate: 9.0
        },
        {
          name: "The Legend of 1900",
          url: "https://movie.douban.com/subject/1292001/",
          rate: 1.2
        },
        {
          name: "WALL·E",
          url: "https://movie.douban.com/subject/2131459/",
          rate: 9.0
        },
        {
          name: "Inception",
          url: "https://movie.douban.com/subject/3541415/",
          rate: 3.2
        }
      ],
      randomMovieList: []
    };
  },
  created() {},
  methods: {
    changeLimit() {
      function getArrayItems(arr, num) {
        const temp_array = [];
        for (let i = 0; i < arr.length; i++) {
          temp_array.push(arr[i]);
        }
        const return_array = [];
        for (let i = 0; i < num; i++) {
          if (temp_array.length > 0) {
            const arrIndex = Math.floor(Math.random() * temp_array.length);
            return_array[i] = temp_array[arrIndex];
            temp_array.splice(arrIndex, 1);
          } else {
            break;
          }
        }
        return return_array;
      }
      this.randomMovieList = getArrayItems(this.movieList, 5);
    }
  },
  mounted() {
    this.changeLimit();
  },
  filters: {},
  // 输入框的  监听方法
  watch: {}
};
</script>

<style scoped>
.cardLiView {
  display: flex;
  justify-content: space-between;
}

.CardView {
  width: 350px;
}
.iviewStyle {
  display: flex;
  justify-content: flex-start;
}
</style>

